<template>
  <div class="payment-container">
    <el-card class="payment-card">
      <h2 class="payment-title">学生缴费</h2>
      <el-form ref="paymentForm" :model="paymentForm" label-width="100px" class="payment-form">
        <el-form-item label="缴费金额" prop="amount">
          <el-input v-model="paymentForm.amount" autocomplete="off" placeholder="请输入缴费金额" type="number"></el-input>
        </el-form-item>
        <el-form-item label="支付方式" prop="paymentMethod">
          <el-select v-model="paymentForm.paymentMethod" placeholder="选择支付方式">
            <el-option label="信用卡" value="creditCard"></el-option>
            <el-option label="银行转账" value="bankTransfer"></el-option>
            <el-option label="支付宝" value="alipay"></el-option>
            <el-option label="微信支付" value="wechatPay"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item v-if="paymentForm.paymentMethod === 'creditCard'" label="信用卡号" prop="cardNumber">
          <el-input v-model="paymentForm.cardNumber" autocomplete="off" placeholder="请输入信用卡号"></el-input>
        </el-form-item>
        <el-form-item v-if="paymentForm.paymentMethod === 'creditCard'" label="支付密码" prop="paymentPassword">
          <el-input v-model="paymentForm.paymentPassword" type="password" autocomplete="off" placeholder="请输入支付密码"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="makePayment" class="payment-button">缴费</el-button>
        </el-form-item>
      </el-form>
      <el-button type="text" @click="fetchPaymentHistory" class="view-history-button">查看缴费记录</el-button>

      <!-- 显示缴费记录 -->
      <el-table :data="paymentHistory" style="width: 100%" v-if="paymentHistory.length > 0">
        <el-table-column label="缴费金额" prop="amount"></el-table-column>
        <el-table-column label="支付方式" prop="paymentMethod"></el-table-column>
        <el-table-column label="支付时间" prop="createdAt"></el-table-column>
        <el-table-column label="支付状态" prop="paymentStatus"></el-table-column>
      </el-table>
      <div v-else class="no-history">暂无缴费记录</div>
    </el-card>
  </div>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      paymentForm: {
        amount: "",
        paymentMethod: "",
        cardNumber: "",
        paymentPassword: ""
      },
      paymentHistory: []
    };
  },
  methods: {
    async makePayment() {
      try {
        const token = localStorage.getItem("token");
        const response = await axios.post(
            "http://localhost:3000/payment",
            this.paymentForm,
            {
              headers: {
                Authorization: `Bearer ${token}`
              }
            }
        );
        this.$message.success(response.data.message || "缴费成功");
      } catch (err) {
        let errorMessage = "缴费失败";
        if (err.response && err.response.data) {
          errorMessage = err.response.data.message || errorMessage;
        }
        this.$message.error(errorMessage);
      }
    },
    async fetchPaymentHistory() {
      try {
        const token = localStorage.getItem("token");
        const response = await axios.get("http://localhost:3000/payment/history", {
          headers: {
            Authorization: `Bearer ${token}`
          }
        });
        this.paymentHistory = response.data;
      } catch (err) {
        this.$message.error("获取缴费记录失败");
      }
    }
  }
};
</script>

<style scoped>
.payment-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  background: #f9f9f9;
  padding: 20px;
}

.payment-card {
  width: 500px;
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  background-color: #ffffff;
}

.payment-title {
  text-align: center;
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 20px;
}

.payment-form {
  padding: 20px 0;
}

.el-form-item {
  margin-bottom: 20px;
}

.el-input, .el-select {
  border-radius: 8px;
  height: 40px;
}

.payment-button {
  width: 100%;
  height: 45px;
  border-radius: 22px;
  background-color: #42a5f5;
  color: #ffffff;
}

.view-history-button {
  margin-top: 20px;
}

.no-history {
  text-align: center;
  color: #888;
}
</style>
